<section ng-app="markup" ng-controller="textCtrl">
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <input type="text" required ng-model="text" placeholder="hello world!" max="10" min="2"/>
</section>
<?php echo CHtml::scriptFile('/js/angular.min.js'); ?>
<script>
    var markup = angular.module("markup",[]).controller('textCtrl', function($scope){
        $scope.text = "Hello world!";
        $scope.drawText = function(){
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            var x = canvas.width / 2;
            var y = canvas.height / 2;
            
            context.font = "50pt Monospaces";
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.strokeStyle = '#dd0000';
            context.lineWidth = 2;
            
            context.shadowColor = "green";
            context.shadowBlur = 20;
            context.shadowOffsetX = 20;
            context.shadowOffsetY = 20;
            context.globalAlpha = 0.6;
            
            context.strokeText($scope.text, x, y);
        };
        $scope.$watch("text", function(){
            $scope.drawText();
        });
    });
</script>